<template>
  <div class="container">
    <div style="display: flex">
      <el-upload
        ref="upload"
        action="action"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :show-file-list="false"
        :http-request="handlehttpRequest"
        :on-change="onUploadChange"
      >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-upload"
          >导入Excel</el-button
        >
      </el-upload>

      <el-button
        style="margin-left: 20px"
        size="small"
        icon="el-icon-download"
        @click="handleDownload"
        >导出Excel</el-button
      >

      <el-button
        style="margin-left: 20px"
        size="small"
        icon="el-icon-delete"
        @click="handleClear"
        >清空数据</el-button
      >
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
    >
    <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      </el-table>
  </div>
</template>

<script>
import { readExcelToJson, saveJsonToExcel } from '../utils'

export default {
  data() {
    return {
      file: null,
      list: [],
      tableData :[
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    }
  },

  methods: {
    handlehttpRequest() {},

    // 读取文件为json数据
    onUploadChange(file) {
      console.log(file)
      this.file = file
      readExcelToJson(file).then((res) => {
        this.tableData = res
      })
    },

    handleDownload() {
      saveJsonToExcel(this.tableData, 'data.xlsx')
    },

    handleClear() {
      this.tableData = null
    },
  },

  // created() {
  //   // this.tableData = tableData
  // },
}
</script>

<style lang="scss">
body {
  background: #f4f4f4;
  padding: 0;
  margin: 0;
}

.container {
  width: 1024px;
  // min-height: 100vh;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}
</style>